@import "@/app/styles";

.Modal {
  &__open {
  }

  &Header {
    h2 {
    }

    &__start {
    }

    &__center {
    }

    &__end {
    }
  }

  &Content {
    margin-top: 24px;
  }

  &Footer {
    margin-top: 32px;
  }

  &Default {
    padding: 40px;
    color: $color-text;
    border-radius: $border-radius;

    &__medium {
      min-width: 760px;
      max-width: 760px;
      width: 100%;
    }

    &CloseButton {
      width: 20px;
      height: 20px;

      svg {
        fill: $color-dark-gray;
        transition: all $transition;
      }

      &:hover {
        svg {
          fill: $color-suit-gray;
        }
      }
    }
  }
}

.theme-dark {
  .Modal {
    &Header {
      color: $color-white;
    }

    &Default {
      background: $color-darkness;
      box-shadow: $shadow-perimeter-light;
    }
  }
}

/* ----- Модальное окно по центру адаптировано ----- */
.react-responsive-modal-root .react-responsive-modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----- Fixed Screen Glitch When Close Modal ----- */
.react-responsive-modal-overlay,
.react-responsive-modal-container,
.react-responsive-modal-modal {
  animation-fill-mode: forwards !important;
}
